<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>ITLibrary</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
</head>

<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">ITLibrary</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item layui-this"><a href="">首页</a></li>
			</ul>
			<#-- 登录前：session中没有user对象，user??等同于user!=null -->
			<#if !user??>
				<ul id="login-menu" class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="javascript:void(0);" onclick="openLogin()">
							<i class="layui-icon layui-icon-username"></i> 登录
						</a>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:void(0);" onclick="openRegister()">
							<i class="layui-icon layui-icon-auz"></i> 注册
						</a>
					</li>
				</ul>
			</#if>
			<#--登录后-->
			<ul id="user-menu" class="layui-nav layui-layout-right ${(user??)?string('','layui-hide')}">
				<li class="layui-nav-item">
					<a href="">我的借阅<span class="layui-badge">9</span></a>
					<span id="user-name" class="layui-badge"><#if user??>${user.name!}</#if></span>
				</li>
			</ul>
		</div>
		
		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree"  lay-filter="test">
					<#list allCategory as a>
						<li class="layui-nav-item ${(a.cid==1)?string('layui-this','')}" style="text-align:center"><a href="">${a.name}</a></li>
					</#list>
				</ul>
			</div>
		</div>
  
		<!-- 内容主体区域 -->
		<div class="layui-body">
			<form action="/books" class="layui-form" style="padding:20px 20px 5px 35px">
				<div class="layui-inline">
					<label class="layui-input-label">图书名称：</label>
					<div class="layui-input-inline" style="width: 150px;">
						<input type="text" name="bookName" style="height:30px" autocomplete="off" class="layui-input" value="${bookName}">
					</div>
				</div>
			
				<div class="layui-inline" style="padding-left:20px">
					<label class="layui-input-label">图书作者：</label>
					<div class="layui-input-inline" style="width: 150px;">
						<input type="text" name="authorName" style="height:30px" autocomplete="off" class="layui-input" value="${authorName}">
					</div>
				</div>
				
				<div class="layui-inline" style="padding-left:20px">
					<button class="layui-btn layui-btn-radius layui-btn-primary layui-btn-sm" lay-submit>
						<i class="layui-icon layui-icon-search"></i>搜索图书
					</button>
				</div>
			</form>
	
			<hr>
			
			<div align="center">
				<#list allbooks.resultList as book>
					<#if book_index % 4 == 0>
						<div class="layui-row layui-col-space1" style="padding-top:20px">
					</#if>
					<div class="layui-col-md3">;
						<img src="/images/d83aff379232fd27.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>书名:${book.name}</p>
							<p>作者:
								<#list book.authorList as author>
									${author.name}
								</#list>
							</p>
							<p>
								剩余：<span style="color:red">${book.leftBookList?size}</span>&nbsp;&nbsp;
								总数：<span style="color:red">${book.bookList?size}</span>
							</p>
						</div>
						<button onclick="borrowButton(${book.fid})" type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple"></i>借阅
							<input type="hidden" name="fid" value="${book.fid}">
						</button>
					</div>
					<#if book_index % 4 == 3 || book_has_next == false>
						</div>
					</#if>
				</#list>
				
				<div class="layui-row layui-col-space1" style="padding-top:20px">

				</div>
			</div>
			
			<div id="pagination" align="center" style="padding:20px 0px 20px 0px"></div>
		</div>
		
		<!-- 底部固定区域 -->
		<div class="layui-footer" style="text-align:center">
			©www.jwkt.net 版权所有
		</div>
		
		<!-- 登录表单 -->
		<div id="login-layer" style="display: none">
			<form id="login-form" class="layui-form" style="padding:45px 20px 5px 20px">
				<div class="layui-form-item">
					<label class="layui-form-label">登录名</label>
					<div class="layui-input-block">
						<input type="text" name="username" class="layui-input" id="username" style="width:80%">
					</div>
					<div id="login-msg-1" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div id="login-txt-1" class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密　码</label>
					<div class="layui-input-block">
						<input type="password" name="password" class="layui-input" style="width:80%">
					</div>
					<div id="login-msg-2" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div id="login-txt-2" class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
			</form>
		</div>
		
		<!-- 注册表单 -->
		<div id="register-layer" style="display: none">
			<form id="register-form" class="layui-form" style="padding:45px 20px 5px 20px">
				<div class="layui-form-item">
					<label class="layui-form-label">登录名</label>
					<div class="layui-input-block">
						<input type="text" name="username" class="layui-input" style="width:80%" <#--onblur="isRepeat()"-->>
					</div>
					<div id="msg-1" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div id="msg-text-1" class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密　码</label>
					<div class="layui-input-block">
						<input type="text" name="password" class="layui-input" style="width:80%">
					</div>
					<div id="msg-2" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div id="msg-text-2" class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">姓　名</label>
					<div class="layui-input-block">
						<input type="text" name="name" class="layui-input" style="width:80%">
					</div>
					<div id="msg-3" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div id="msg-text-3" class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电　话</label>
					<div class="layui-input-block">
						<input type="text" name="phone" class="layui-input" style="width:80%">
					</div>
					<div id="msg-4" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div id="msg-text-4" class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	
	<script src="/layui/js/jquery.min.js"></script>
	<script src="/layui/layui.js"></script>
	<script>
	//JavaScript代码区域
	layui.use(['element', 'form', 'laypage', 'layer'], function(){
		var element = layui.element,
			laypage = layui.laypage,
			form = layui.form,
			layer = layui.layer;

		laypage.render({
			elem: 'pagination',
			count: ${allbooks.totalCount},
			limit: ${allbooks.pageSize},
			curr:${allbooks.currentPage},
			jump: function(obj, first){
				if(!first){
					location.href="/books/?pageNo=" + obj.curr;
				}
			}
		});
	});

	//登陆
	function openLogin() {
		layer.open({
			type: 1,
			title: "用户登录",
			area: ['500px', '270px'],
			btnAlign: 'c',
			btn: ['登录', '取消'],
			yes: function(index, layero){
				$.ajax({
					url: "/login",
					method: 'post',
					data: $("#login-form").serialize(),
					dataType: 'JSON',
					success:function(res){
						if(res.result == -1){
							$("#login-txt-1").text(res.message);
							$("#login-msg-1").removeClass("layui-hide");
							$("#login-msg-2").addClass("layui-hide");
						} else if(res.result == -2){
							$("#login-txt-2").text(res.message);
							$("#login-msg-2").removeClass("layui-hide");
							$("#login-msg-1").addClass("layui-hide");
						} else {
							$("#user-name").text(res.message);
							$("#login-menu").addClass("layui-hide");
							$("#user-menu").removeClass("layui-hide");
							layer.close(index);
						}
					},
					error:function (data) {
						alert("服务器连接失败！")
					}
				})
			},
			btn2: function(index, layero){
				return true;
			},
			content: $("#login-layer")
		});
	}

	//注册
	function openRegister() {
		layer.open({
			type: 1,
			title: "用户注册",
			area: ['500px', '420px'],
			btnAlign: 'c',
			btn: ['注册', '取消'],
			yes: function(index, layero){
				$.ajax({
					url: '/register',
					type: 'post',
					data: $("#register-form").serialize(),
					dataType: "JSON",
					success: function (data) {
						if (data.result < 0) {
							for(var i = -1; i >= -4; i--) {
								if (data.result == i) {
									$("#msg" + i).removeClass("layui-hide");
								} else {
									$("#msg" + i).addClass("layui-hide");
								}
							}
							$("#msg-text" + data.result).text(data.message);
							layer.style(index, {height: "460px"});
						} else {
							layer.msg(data.message);
							layer.close(index);
						}
					},
					error: function(error){    //失败后回调
						alert("注册失败，请稍后重试");
					}
				});
				$("#msg-1").removeClass("layui-hide");
				layer.style(index, {height: "460px"});
			},
			btn2: function(index, layero){
				return true;
			},
			content: $("#register-layer")
		});
	}

	function borrowButton(fid) {
		alert(fid);
		$.ajax({
			url: '/borrow',
			type: 'post',
			data: {fid:fid},
			dataType: "JSON",
			success: function (data) {
				alert(data.result+data.message);
				location = location;
			},
			error: function(error){    //失败后回调
				alert("借阅失败，请稍后重试");
			}
		});
	}
	</script>
</body>
</html>